<template>
  <div>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <Breadcrumb>粉丝管理</Breadcrumb>
        </div>
        <div>
             <el-tabs v-model="activeName" type="card"  @tab-click="handleClick">
                <el-tab-pane label="粉丝列表" name="first">
                    <div class="fans_list">
                        <div class="fans_item"
                        v-for="fan in fans"
                        :key="fan.id.toString()"
                        >
                            <el-avatar
                            :size="80"
                            :src="fan.photo"></el-avatar>
                            <p>{{fan.name}}</p>
                            <el-button type="primary" plain size="small">+关注</el-button>
                        </div>
                    </div>
                    <el-pagination
                        background
                        @current-change="hArrtiao"
                        layout="prev, pager, next"
                        :page-size="20"
                        :total="total_count">
                    </el-pagination>
                </el-tab-pane>
                <el-tab-pane label="粉丝画像" name="second">
                  <div ref="main" style="width: 600px;height:400px;">
                  </div>
                </el-tab-pane>
             </el-tabs>
        </div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'fans',
  data () {
    return {
      // 默认选中状态
      activeName: 'second',
      // 图片列表
      fans: [],
      // 总条数
      total_count: 0,
      curPage: 1
    }
  },
  created () {
    this.Afans()
  },
  methods: {
    //  分页
    hArrtiao (curPage) {
      // 分页
      this.curPage = curPage
      //   再次的调用
      this.Afans()
    },
    //  头像列表
    async Afans () {
      const res = await this.$http({
        method: 'GET',
        url: '/mp/v1_0/followers',
        params: {
          page: this.curPage
        }
      })
      console.log(res)
      this.fans = res.data.data.results
      this.total_count = res.data.data.total_count
    },

    getFansData () {
      return this.$http({
        method: 'GET',
        url: '/mp/v1_0/statistics/followers'
      })
    },
    // 加工
    buildDataForEchart (obj) {
      // 接收一个对象，返回两个数组
      const xData = Object.keys(obj).map(item => item.replace('le', '小于').replace('gt', '大于'))

      // const xData = Object.keys(obj).map(item => {
      //   return item.replace('le', '小于').replace('gt', '大于')
      // })

      const yData = Object.values(obj)
      // console.log(obj)
      return {
        xData,
        yData
      }
    },
    async draw () {
      // 0 取回数据(这里调用)
      const res = await this.getFansData()
      console.log('dsadssfasd', res)
      // （1）对数据进行加工
      // （2）填充到options中去
      const { xData, yData } = this.buildDataForEchart(res.data.data.age)
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.main)
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '粉丝分布图'
        },
        tooltip: {},
        legend: {},
        xAxis: {
        //   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          data: xData
        },
        yAxis: {},
        series: [{
          name: '年龄分布',
          type: 'bar',
          //   data: [5, 20, 36, 10, 10, 20]
          data: yData
        }]
      }
      // 3. 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    // 图像开始
    handleClick () {
      if (this.activeName === 'second') {
        this.draw()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
